<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>数据可视化系统 -视图编辑</title>
	<!-- 公共CSS -->
	<script src="../../style/common/common_css.js"></script>
	<!-- 用户CSS -->
	<link href="../../style/css/style.css" rel="stylesheet">
	<link href="../../style/css/view.css" rel="stylesheet">
	<!-- jquery -->
	<script type="text/javascript" src="../../style/common/jquery/jquery.min.js"></script>


</head>

<%--初始化视图布局 --%>
<script language="javascript">
    <c:choose >
    <c:when test = "${empty pageInfo}" >
    var pageInfo = {
        "layout": 1,
        "body": {
            tr1: [{
                colspan: 1,
                rowspan: 1,
                width: 100,
                height: 100,
                id: 1
            }]
        }
    };
    </c:when>
    <c:otherwise >
    var pageInfo = ${pageInfo};
    </c:otherwise>
    </c:choose>

    var curTmpInfo = {
        is3g: '${is3g}'
    };

    jQuery(function () {
        //初始化数据集
        reloadDatasetTree();
        //初始化已选表
        initTableTree();
        //初始化布局
        initlayout();
        //初始化组件拖拽
        regCompTree();
        //初始化参数及拖拽
        initParams();
    });
</script>


<body class="easyui-layout" id="Jlayout">
<div data-options="region:'north',border:false" style="height:32px; overflow:hidden;">
	<div class="panel-header" style="padding:3px;">
		<a href="javascript:backpage();" id="mb1" class="easyui-linkbutton" plain="true" iconCls="icon-back">返回</a>
		<a href="javascript:savepage();" id="mb2" class="easyui-linkbutton" plain="true" iconCls="icon-save">保存</a>
		<a href="javascript:setlayout();" id="mb3" class="easyui-linkbutton" plain="true" iconCls="icon-layout"
		   title="">布局</a>
		<a href="javascript:;" menu="#selectinfo" id="mb4" class="easyui-menubutton" plain="true"
		   iconCls="icon-dataset">数据</a>
		<a href="javascript:setpagestyle();" id="mb5" class="easyui-linkbutton" plain="true"
		   iconCls="icon-styles">风格</a>
		<a href="javascript:exportPage()" id="mb6" class="easyui-linkbutton" plain="true" iconCls="icon-export">导出</a>
		<a href="javascript:printpage()" id="mb10" class="easyui-linkbutton" plain="true" iconCls="icon-print">打印</a>
		<a href="javascript:helper()" id="mb10" class="easyui-linkbutton" plain="true" iconCls="icon-help">帮助</a>
	</div>

</div>

<%-- 组件列表 --%>
<div data-options="region:'west',split:true,title:'资源列表区'" style="width:190px;">

	<div id="comp_tab" data-options="fit:true,border:false" class="easyui-tabs" style="height:auto; width:auto;">

		<div title="组件">
			<!-- 阻止右键动作 -->
			<ul id="param_tree" data-options="onContextMenu:function(e){e.preventDefault();}">
				<li><span>表单</span>
					<ul>
						<li data-options="attributes:{tp:'text'},iconCls:'icon-dimlevel'"><span>输入框</span></li>
						<li data-options="attributes:{tp:'radio'},iconCls:'icon-dimlevel'"><span>单选框</span></li>
						<li data-options="attributes:{tp:'checkbox'},iconCls:'icon-dimlevel'"><span>多选框</span></li>
						<li data-options="attributes:{tp:'dateselect'},iconCls:'icon-dimlevel'"><span>日历框</span></li>
						<li data-options="attributes:{tp:'monthselect'},iconCls:'icon-dimlevel'"><span>月份框</span></li>
						<li data-options="attributes:{tp:'yearselect'},iconCls:'icon-dimlevel'"><span>年份框</span></li>
					</ul>
				</li>
			</ul>
			<ul id="comp_tree" data-options="onContextMenu:function(e){e.preventDefault();}">
				<li data-options="attributes:{tp:'text'}, iconCls:'icon-label'"><span>文本</span></li>
				<li data-options="attributes:{tp:'box'}, iconCls:'icon-dimgroup'"><span>数据块</span></li>
				<li data-options="attributes:{tp:'chart'},iconCls:'icon-chart'"><span>图表</span></li>
				<li data-options="attributes:{tp:'grid'},iconCls:'icon-table'"><span>表格</span></li>
				<li data-options="attributes:{tp:'table'},iconCls:'icon-cross'"><span>交叉表</span></li>
			</ul>
		</div>

		<div title="立方体" style="">
			<ul id="datasettree" class="easyui-tree"></ul>
		</div>

		<div title="数据表" style="">
			<ul id="tabletree" class="easyui-tree"></ul>
		</div>
	</div>
</div>

<%-- 视图编辑区 --%>
<div data-options="region:'center',border:true" title="视图编辑区">
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'center'" id="optarea" style="padding:5px;background-color:#dddddd;" align="center">
		</div>
	</div>
</div>

<div id="pdailog"></div>
<div class="indicator">==></div>


<%--自定义布局 --%>
<div id="autolayoutmenu" class="easyui-menu">
	<div onclick="lyt_insertRow()" id="lyt_insertrow">插入行</div>
	<div onclick="lyt_insertCol()" id="lyt_insertcol">插入列</div>
	<div onclick="lyt_deleteRow()" id="lyt_deleterow">删除行</div>
	<div onclick="lyt_deleteCol()" id="lyt_deletecol">删除列</div>
	<div onclick="lyt_mergeCell()" id="lyt_mergeCell">合并</div>
	<div onclick="lyt_unmergeCell()" id="lyt_unmergeCell">取消合并</div>
</div>

<%--编辑表格数据 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--%>
<div id="dimoptmenu" class="easyui-menu">
	<div onclick="dimsort('asc')">升序</div>
	<div onclick="dimsort('desc')">降序</div>
	<div>
		<span>移动</span>
		<div style="width:120px;">
			<div iconCls="icon-back" onclick="dimkpimove('left')">左移</div>
			<div iconCls="icon-right" onclick="dimkpimove('right')">右移</div>
			<div id="m_moveto" onclick="dimexchange()">移至</div>
		</div>
	</div>
	<div iconCls="icon-sum" onclick="aggreDim()" id="m_aggre">聚合...</div>
	<div onclick="delJsonKpiOrDim('dim')" iconCls="icon-remove">删除</div>
</div>
<div id="kpioptmenu" class="easyui-menu">
	<div onclick="kpiproperty()">属性...</div>
	<div>
		<span>排序</span>
		<div style="width:120px;">
			<div id="k_kpi_ord1" onclick="kpisort('asc')">升序</div>
			<div id="k_kpi_ord2" onclick="kpisort('desc')">降序</div>
			<div id="k_kpi_ord3" iconCls="icon-ok" onclick="kpisort('')">默认</div>
		</div>
	</div>
	<div>
		<span>移动</span>
		<div style="width:120px;">
			<div iconCls="icon-back" onclick="dimkpimove('left')">左移</div>
			<div iconCls="icon-right" onclick="dimkpimove('right')">右移</div>
		</div>
	</div>
	<div iconCls="icon-remove" onclick="delJsonKpiOrDim('kpi')">删除</div>
</div>
<div id="chartoptmenu" class="easyui-menu">
	<div onclick="chartsort('asc')">升序</div>
	<div onclick="chartsort('desc')">降序</div>
	<div onclick="setChartKpi()" id="m_set">属性...</div>
	<div onclick="delChartKpiOrDim()" iconCls="icon-remove">清除</div>
</div>
<div id="table_menu" class="easyui-menu">
	<div iconCls="icon-dataset" onclick="editComp()">数据</div>
	<div iconCls="icon-filter" onclick="setcompfilter()">筛选...</div>
	<div onclick="compevent()">事件...</div>
	<div onclick="setComp()">属性...</div>
</div>
<div id="box_menu" class="easyui-menu">
	<div iconCls="icon-dataset" onclick="editComp()">数据</div>
	<div iconCls="icon-filter" onclick="setcompfilter()">筛选...</div>
	<div onclick="setComp()">属性...</div>
</div>
<div id="grid_menu" class="easyui-menu">
	<div iconCls="icon-dataset" onclick="editComp()">数据</div>
	<div iconCls="icon-filter" onclick="setcompfilter()">筛选...</div>
	<div onclick="setComp()">属性...</div>
</div>
<div id="text_menu" class="easyui-menu">
	<div onclick="editComp()">编辑</div>
	<div onclick="setComp()">属性...</div>
</div>
<div id="chart_menu" class="easyui-menu">
	<div onclick="setcharttype(false)">图表类型...</div>
	<div iconCls="icon-dataset" onclick="editComp()">数据</div>
	<div iconCls="icon-filter" onclick="setcompfilter()">筛选...</div>
	<div onclick="compevent()">事件...</div>
	<div onclick="setComp()">属性...</div>
</div>
<div id="param_menu" class="easyui-menu">
	<div iconCls="icon-edit" onclick="newparam('update')">编辑</div>
	<div iconCls="icon-back" onclick="moveparam('left')">左移</div>
	<div iconCls="icon-right" onclick="moveparam('right')">右移</div>
</div>

<div id="selectinfo" style="width:150px;">
	<div onclick="selectdataset()">选择立方体...</div>
	<div onclick="selecttable()">选择数据表...</div>
</div>

<div id="gridoptmenu" class="easyui-menu">
	<div>
		<span>排序</span>
		<div style="width:120px;">
			<div id="col_ord1" onclick="gridColsort('asc')">升序</div>
			<div id="col_ord2" onclick="gridColsort('desc')">降序</div>
			<div id="col_ord3" iconCls="icon-ok" onclick="gridColsort('')">默认</div>
		</div>
	</div>
	<div>
		<span>移动</span>
		<div style="width:120px;">
			<div iconCls="icon-back" onclick="tableColmove('left')">左移</div>
			<div iconCls="icon-right" onclick="tableColmove('right')">右移</div>
		</div>
	</div>
	<div onclick="setGridColProp()" id="m_set">属性...</div>
	<div onclick="delGridCol()" iconCls="icon-remove">删除</div>
</div>
</body>


<!-- 公共js -->
<script src="../../style/common/common_js.js"></script>
<!-- 用户js -->
<script type="text/javascript" src="../../style/js/visual.js"></script>
<script type="text/javascript" src="../../style/js/visual-comp.js"></script>
<script type="text/javascript" src="../../style/js/visual-chart.js"></script>
<script type="text/javascript" src="../../style/js/visual-param.js"></script>
<script type="text/javascript" src="../../style/js/visual-table.js"></script>

</html>
